<template>
    <div class="salseStoreOrder">
        <IHeader class="header" back="true" title="订单管理"></IHeader>
        <div class="order-header">
            <text v-for="(item, index) in data1" :key="index" class="navItem" @click="swithNav(index)" :class="[idx === index ?  'afterpress': 'navItem']">{{item.description}}</text>
        </div>
        <div class="xian"></div>
        <list @loadmore="loadmore">
                <cell class="store-item" v-for="(item) in dataList" :key="item.id">
                    <div class="store-info">
                        <div class="store-name">
                            <image :src="imgPath('home.png')" class="storeImg"></image>
                            <text class="storename">{{item.shopsName}}</text>
                        </div>
                        <div class="delete-con">
                            <text class="daifukuan" v-if="item.orderStatus == 1">待付款</text>
                            <text class="daifukuan" v-if="item.orderStatus == 2">去发货</text>
                            <text class="daifukuan" v-if="item.orderStatus == 3">待收货</text>
                            <text class="daifukuan" v-if="item.orderStatus == 4">已完成</text>
                            <text class="daifukuan" v-if="item.orderStatus == 5">已取消</text>
                            <text class="daifukuan" v-if="item.orderStatus == 6">已转账</text>
                            <image :src="imgPath('shanchu.png')" v-if="item.orderStatus == 4 || item.orderStatus == 5" class="delete" @click="deleteOrder(item.id)"></image>
                        </div>
                    </div>
                    <div class="good-wrap">
                        <div class="goodsItem"  v-if="item.goodsList && item.goodsList.length == 1" @click="pushToGoodsDetail(item.id)">
                            <div class="good-item" v-for="item1 in item.goodsList" :key="item1.id">
                                <image :src="item1.goodsUrl" class="goodImg"></image>
                                <div class="good-right">
                                    <text class="goodname">{{item1.goodsName}}</text>
                                </div>
                            </div>
                        </div>
                        <div class="goodsItem"  v-if="item.goodsList && item.goodsList.length == 2" @click="pushToGoodsDetail(item.id)">
                            <div class="good-item goods-items" >
                                <div class="good-left">
                                    <image v-for="item1 in item.goodsList" :key="item1.id" :src="item1.goodsUrl" class="goodImg"></image>
                                </div>
                                <div class="good-right">
                                    <image :src="imgPath('write.png')" class="more"></image>
                                </div>
                            </div>
                        </div>
                        <div class="goodsItem"  v-if="item.goodsList && item.goodsList.length != 2 && item.goodsList.length != 1" @click="pushToGoodsDetail(item.id)">
                            <div class="good-item goods-items">
                                <div class="good-left">
                                    <image  :src="item.goodsList[0].goodsUrl" class="goodImg"></image>
                                    <image  :src="item.goodsList[1].goodsUrl" class="goodImg"></image>
                                    <image  :src="item.goodsList[2].goodsUrl" class="goodImg"></image>
                                </div>
                                <div class="good-right">
                                    <image :src="imgPath('write.png')" class="more"></image>
                                </div>
                            </div>
                        </div>
                        <div class="all-price">
                            <text class="main-text1">共{{item.goodsAmount}}件商品，共计为：</text>
                            <text class="main-text">￥</text>
                            <text class="main-text main-text2">{{item.actualPrice}}</text>
                        </div>
                        <div class="all-btn">
                            <div class="btn-info">
                                <text class="btn" v-if="item.orderStatus == 1" @click="tipPay(item)">提醒付款</text>
                                <text class="btn" v-if="item.orderStatus == 1" @click="updatePrice(item.id)">修改价格</text>
                                <text class="btn" v-if="item.orderStatus == 2" @click="goFaHuo(item.id)">去发货</text>
                                <text class="btn" v-if="item.orderStatus == 3" @click="tipGet(item)">提醒收货</text>
                                <text class="btn" v-if="item.orderStatus == 4" @click="callService(item)">售后沟通</text>
                                <text class="btn" v-if="item.orderStatus == 6" @click="confirmMoney(item.id)">确认收款</text>
                            </div>
                        </div>

                        <div class="xian"></div>
                    </div>
                </cell>
        </list>
        <Dialog  :show="dialogShow"   @close="cancel">
            <div class="content">
                <text class="company-tite">填写发货信息</text>
                <div class="company-item">
                    <text class="con">发货方式</text>
                    <input type="text" placeholder="请输入发货方式" v-model="sendType" class="company-ipt">
                </div>
                <div class="company-item">
                    <text class="con">物流单号</text>
                    <input type="text" placeholder="请输入物流单号"  v-model="wuLiuNum" class="company-ipt">
                </div>
            </div>
            <div class="footer-wrapper flex_row">
                <text class="footer-btn cancel" @click="cancel">取消</text>
                <text class="footer-btn confirm" @click="confirm">确认</text>
            </div>
        </Dialog>
        <Dialog :show="showDialog" @close="hideDialog">
            <text class="dialog-title">泳衣库服务热线</text>
            <text class="phoneNumber">{{phoneNumber}}</text>
            <div class="callPhone-wrapper flex_row">
                <text class="callPhone" @click="handleCall">拨打电话</text>
            </div>
        </Dialog>
        <Dialog :show="priceDialog" @close="hidePriceDialog">
            <div class="company-item company-item">
                <input type="text" placeholder="请输入修改的价格"  v-model="updatePri" class="price-ipt">
            </div>
            <div class="footer-wrapper flex_row">
                <text class="footer-btn cancel" @click="priceCancel">取消</text>
                <text class="footer-btn confirm" @click="priceConfirm">确认</text>
            </div>
        </Dialog>
        <!--loading-->
        <wxc-loading :show="loadingShow" :need-mask="needMask"></wxc-loading>
    </div>
</template>

<script>
import IHeader from '@/components/header'
import { shopInfo } from '@/api/store'
import {allOrder, orderFaHuo, deleteOrder, messageTip, updateOrderData} from '@/api/order'
import Dialog from '@/components/dialog'
import Nat from 'natjs'
const modal = weex.requireModule('modal')
export default {
  name: 'saleStoreOrder',
  data () {
    return {
      needMask: true, // 显示蒙版
      loadingShow: false, // loading
      hasMore: true, // 是否还有数据
      data1: [{'description': '全部', 'value': ''}, {'description': '待付款', 'value': 1}, {'description': '去发货', 'value': 2}, {'description': '待收货', 'value': 3}, {'description': '已完成', 'value': 4}],
      allOrder: false,
      shopsId: '', // 店铺ID
      pageNo: 1,
      pageSize: 10,
      dataList: [],
      idx: 0,
      allBbtn: true,
      showModal: false,
      dialogShow: false,
      showDialog: false, // 填写发货信息弹窗
      priceDialog: false, // 修改价格弹窗
      actualPrice: '',
      orderAchieve: false,
      orderId: '',
      id: '',
      dingdanId: '',
      sendType: '',
      wuLiuNum: '',
      phoneNumber: ''
    }
  },
  mounted () {
    const that = this
    that.idx = that.$route.query.type ? that.$route.query.type : 0
    that.$api.get(shopInfo, {}, (res) => {
      that.shopsId = res.data.id
      that.getDataList()
    }, () => {}, true)
  },
  methods: {
    // 切换订单
    swithNav (inx) {
      const that = this
      that.idx = inx
      that.hasMore = true
      that.pageNo = 1
      that.dataList = []
      that.getDataList()
    },
    getDataList () { // 获取数据
      const that = this
      let params = {
        pageNo: that.pageNo,
        pageSize: that.pageSize,
        orderStatus: that.data1[that.idx].value,
        shopsId: that.shopsId
      }
      that.loadingShow = true
      that.$api.get(allOrder, params, function (res) {
        that.loadingShow = false
        let list = res.data.records
        if (list.length <= 0) {
          that.hasMore = false
          modal.toast({
            message: '没有数据了~'
          })
          return
        }
        that.dataList = that.dataList.concat(list)
      }, () => {
        that.loadingShow = false
      })
    },
    loadmore () { // 加载更多
      const that = this
      if (!that.hasMore) {
        return
      }
      that.pageNo++
      that.getDataList()
    },
    tipPay (item) {
      const that = this
      let param = {
        moduleType: 2,
        messageType: 9,
        pic: item.goodsList[0].goodsUrl,
        name: item.goodsList[0].goodsName,
        price: item.actualPrice
      }
      that.loadingShow = true
      that.$api.post(messageTip, param, function (res) {
        that.loadingShow = false
        modal.toast({
          message: '提醒付款成功'
        })
      }, function () {
        that.loadingShow = false
      }, true)
    },
    goFaHuo (orderId) {
      const that = this
      that.dialogShow = true
      that.dingdanId = orderId
      that.sendType = ''
      that.wuLiuNum = ''
    },
    confirmMoney (id) { // 确认收款
      const that = this
      that.$api.post('/app/yykMallOrder/confirmReceipt?id=' + id, {}, (res) => {
        that.pageNo = 1
        that.dataList = []
        that.getDataList()
      })
    },
    // 提醒收货
    tipGet (item) {
      const that = this
      let param = {
        moduleType: 2,
        messageType: 10,
        pic: item.goodsList[0].goodsUrl,
        name: item.goodsList[0].goodsName,
        price: item.actualPrice
      }
      that.loadingShow = true
      that.$api.post(messageTip, param, function (res) {
        that.loadingShow = false
        modal.toast({
          message: '提醒收货成功'
        })
      }, function () {
        that.loadingShow = false
      }, true)
    },
    // 取消发货
    cancel () {
      const that = this
      that.dialogShow = false
    },
    // 确认发货
    confirm () {
      const that = this
      let params = {
        deliveryType: that.sendType,
        logisticsNo: that.wuLiuNum,
        id: that.dingdanId
      }
      that.loadingShow = true
      if (that.sendType && that.wuLiuNum) {
        that.$api.post(orderFaHuo, params, function (res) {
          that.loadingShow = false
          modal.toast({
            message: '确认发货'
          })
          that.dialogShow = false
        })
      }
    },
    // 删除订单
    deleteOrder (id) {
      const that = this
      that.$api.post(deleteOrder + '/' + id, {}, function (res) {
        let params = {
          pageNo: that.pageNo,
          pageSize: that.pageSize,
          orderStatus: ''
        }
        that.loadingShow = true
        that.$api.get(allOrder, params, function (deleteRes) {
          that.loadingShow = false
          that.idx = 0
          that.dataList = deleteRes.data
        }, function () {
          that.loadingShow = false
        }, true)
      })
    },
    // 联系客服
    callService (item) { // 联系客服
      this.showDialog = true
      this.phoneNumber = item.userPhone
    },
    hideDialog () { // 关闭对话框
      this.showDialog = false
    },
    handleCall () { // 拨打电话
      Nat.call(this.phoneNumber)
    },
    // 更改价格按钮
    updatePrice (id) {
      const that = this
      that.id = id
      that.priceDialog = true
    },
    // 价格更换取消
    priceCancel () {
      const that = this
      that.priceDialog = false
    },
    hidePriceDialog () {
      this.priceDialog = false
    },
    priceConfirm () {
      const that = this
      let params = {
        actualPrice: that.updatePri,
        id: that.id
      }
      that.loadingShow = true
      that.$api.post(updateOrderData, params, function (res) {
        that.loadingShow = false
        modal.toast({
          message: '修改价格成功'
        })
      }, function () {
        that.loadingShow = false
      })
      that.priceDialog = false
    },
    // 跳转到卖家订单详情
    pushToGoodsDetail (id) {
      const that = this
      that.$router.push({path: '/mine/finishOrder', query: {orderId: id}})
    }
  },
  components: {
    IHeader,
    Dialog
  }
}
</script>

<style scoped>
    .order-header {
        height: 88px;
        margin-top: 88px;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
    }

    .navItem{
        font-size: 28px;
        color: rgb(134, 134, 134);
    }

    .xian {
        width: 750px;
        height: 16px;
        background-color: rgb(245, 245, 245);
    }

    .store-item {
        padding-top: 18px;
        padding-left: 24px;
        padding-right: 24px;
        flex-direction: column;
    }

    .store-info {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .storename {
        font-size: 30px;
        color: rgb(134, 134, 134);
    }

    .storeImg {
        width: 34px;
        height: 34px;
        margin-right: 17px;
    }

    .good-wrap {
        flex-direction: column;
    }

    .good-item {
        margin-top: 20px;
        background-color: rgb(235, 235, 235);
        padding-top: 16px;
        padding-bottom: 16px;
        padding-left: 16px;
        padding-right: 16px;
        flex-direction: row;
        border-radius: 10px;
        align-items: center;
    }

    .goodImg {
        width: 128px;
        height: 128px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        margin-right: 15px;
    }

    .goodname {
        font-size: 28px;
        font-weight: bold;
        color: rgb(70, 70, 70);
        lines: 1;
        overflow: hidden;
        width: 520px;
        text-overflow: ellipsis;
    }

    .good-right {
        margin-left: 15px;
    }

    .store-name {
        flex-direction: row;
    }

    .daifukuan {
        font-size: 24px;
        color: rgb(255, 15, 55);
    }

    .all-price {
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        margin-top: 16px;
        margin-bottom: 12px;
    }

    .main-text {
        font-size: 24px;
        color: rgb(134, 134, 134);
    }

    .main-text1 {
        font-weight: bold;
        font-size: 24px;
        font-family: regular;
        color: rgb(70, 70, 70);
    }

    .main-text2 {
        font-size: 30px;
        font-weight: bold;
    }

    .all-btn {
        height: 88px;
        flex-direction: row;
        justify-content: flex-end;
        padding-left: 24px;
        padding-right: 24px;
        flex: 1;
        justify-content: center;
    }

    .btn-info {
        width: 702px;
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: rgb(245, 245, 245);
        justify-content: flex-end;
        flex-direction: row;
        align-items: center;
    }

    .btn {
        padding-left: 50px;
        padding-right: 50px;
        height: 60px;
        line-height: 60px;
        border-width: 1px;
        border-style: solid;
        border-color: rgb(206, 206, 206);
        border-radius: 10px;
        font-size: 26px;
        color: rgb(70, 70, 70);
        fon-family: medium;
        margin-left: 16px;
    }
    .con{
        height: 40px;
        line-height: 40px;
        font-size: 26px;
    }
    .delete-con {
        flex-direction: row;
        align-items: center;
    }

    .delete {
        width: 42px;
        height: 42px;
        margin-left: 20px;
    }
    .more {
        width: 52px;
        height: 16px;
    }

    .goods-items {
        justify-content: space-between;
    }

    .good-left {
        flex-direction: row;
    }
    .company-tite{
        color:rgb(70,70,70);
        font-size:28px;
        font-family: medium;
        margin-bottom:70px;
        text-align: center;
    }
    .content {
        padding-left: 28px;
        padding-right:28px;
    }
    .company-item {
        margin-bottom: 20px;
        flex-direction: row;
        height: 40px;
    }
    .footer-wrapper {
        margin-top: 40px;
        padding-left: 110px;
        padding-right: 110px;
        justify-content: space-between;
    }
    .footer-btn {
        width: 124px;
        height: 44px;
        border-width: 1px;
        border-style: solid;
        border-color: #2b3040;
        line-height: 44px;
        font-size: 26px;
        text-align: center;
        border-radius: 8px;
    }
    .cancel {
        color: #2b3040;
        background-color: #fff;
    }
    .confirm {
        color: #fff;
        background-color: #2b3040;
    }
    .flex_row {
        flex-direction: row;
    }
    .company-ipt{
        height: 40px;
        width: 308px;
        line-height: 50px;
        font-size: 28px;
        padding-left:15px;
        border-bottom-color: rgb(206,206,206);
        border-bottom-width: 1px;
        border-bottom-style: solid;
    }
    .price-ipt {
        width: 260px;
        height: 60px;
        background-color: rgb(245,245,245);
    }
    .dialog-title {
        font-size: 28px;
        text-align: center;
        color: #464646;
        font-family: medium;
    }
    .phoneNumber {
        margin-top: 60px;
        font-size: 36px;
        font-weight: bold;
        text-align: center;
    }
    .callPhone-wrapper {
        margin-top: 50px;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: center;
    }
    .callPhone {
        width: 278px;
        height: 50px;
        line-height: 50px;
        color: #fff;
        font-size: 28px;
        font-weight: bold;
        text-align: center;
        border-radius: 8px;
        background-color: #2b3040;
    }
    .shoucang{
        font-size:24px;
        color: rgb(134, 134, 134);
        border-width: 1px;
        border-style: solid;
        border-color: rgb(134, 134, 134);
        padding-left: 35px;
        padding-right: 35px;
        height: 50px;
        line-height: 50px;
    }
    .afterpress {
        font-size: 30px;
        font-weight: bold;
        color: rgb(70, 70, 70)
    }
    .company-item{
        flex-direction: row;
        justify-content: center;
        margin-top: 30px;
        height: 70px;
    }
    /*.active{*/
        /*font-size:30px;*/
        /*color:rgb(70,70,70);*/
        /*font-weight:bold*/
    /*}*/
    /*.againPay{*/
        /*background-color: #545c72;*/
        /*color: #fff;*/
    /*}*/

</style>
